<!-- 编辑合同模版 -->
<template>
    <div>
        <el-card style="width: auto;">
            <mytitle :showLine="false">{{isMuban?'合同管理模板':'个人模板查看'}}</mytitle>
            <div class="to-input">
                <div><span>出租放（甲方）：<el-input type="text" v-model="info.firstParty" style="width: 200px;"  :disabled="!isMuban" /></span></div>
                <div><span>承租方（乙方）：<el-input type="text" v-model="info.partyB" style="width: 200px;"  disabled /></span></div>
            </div>

            <div style="border: 1px solid #ccc;width: 80%;margin: 0 auto;">
                <Toolbar style="border-bottom: 1px solid #ccc;" :editor="editorRef"
                    :defaultConfig="editorConfig.toolbarConfig" :mode="mode" />
                <Editor style="height: 500px;border-radius: 5px;margin-top: 10px;" v-model="info.contractContents"
                    :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
            </div>
             <div  style="display: flex;justify-content: center;margin: 20px 0;">
                <el-button @click="submitForm" v-if="isMuban" type="danger" >保存</el-button>
                <el-button @click="$router.go(-1)" v-else  >返回</el-button>
             </div>
        </el-card>
    </div>
</template>
<script>
import { addContract, findContract,checkContract } from '../util/api.js'
import { toolbarConfig, MENU_CONF } from '../util/wangeditors.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    components: {
        Editor, Toolbar
    },
    data() {
        return {
            info: {
                contractContents: "",
                firstParty:""
            },
            tenancyId:"",
            isMuban:true,
            mode: 'default',
            editorRef: null,
            editorConfig: {
                placeholder: '请输入内容...',
                //配置工具栏
                toolbarConfig: toolbarConfig,
                MENU_CONF: MENU_CONF,
            }
        }
    },
    mounted() {
        if(this.$route.query.tenancyId){
            // 个人模板
            // console.log(this.$route.query.tenancyId)
            this.isMuban =false
            this.tenancyId = this.$route.query.tenancyId
            this.checkContract()
        }else{
            // 公告模板
            this.findContract()
        }
       
    },
    methods: {
        async checkContract(){
              let res = await checkContract({tenancyId:this.tenancyId})
            //   console.log(res)
              if(res.code!=200)return
              this.info.firstParty=res.data.owner
              this.info.partyB=res.data.partyB
              this.info.contractContents=res.data.contractDetails
        },
        async findContract() {
            let res = await findContract()
            if (res.code != 200) return
            // console.log(res)
            this.info = res.data
        },
        handleCreated(editor) {
            this.editorRef = editor // 记录 editor 实例，重要！
        },
       async submitForm(){
                // console.log(this.info)
                this.$confirm('是否保存?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(async() => {
                        let res= await addContract(this.info)
                        if(res.code!=200)return
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        })          
        },
    },
    beforeDestroy() {
        // 组件销毁时，也及时销毁编辑器
        const editor = this.editorRef
        if (editor == null) return
        editor.destroy()
    }
}
</script>
<style lang="less" scoped>
.to-input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 30px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>